<template>
	<view class="Reporting" id="Reporting">
		<view class="bigbox" id="bigbox" :style="{ minHeight: bigboxMinHeight + 'rpx' }">
			<image :src="actionBG" mode="" style="width: 100%;height: 100%;" class="BG"></image>
			<view class="Forbox">
				<image :src="actionLT" mode="" style="width: 214rpx;height: 152rpx;" class="LT"></image>
<!-- 				<image v-if="!vadioShow" class="BLT" :src="photos" mode="aspectFit"
					style="width: 100%;height: 720rpx;border-radius: 32rpx; box-sizing: border-box;"></image> -->
					<view  v-if="!vadioShow"  class="BLT" :style="'background: url('+ photos +') no-repeat center/cover #eeeeee;'"></view>
				<video v-else id="myVideo" :src="imgUrl" :vslide-gesture="true"
					style="width: 100%;height: 720rpx;border-radius: 32rpx;" enable-danmu danmu-btn controls></video>
			</view>
			<view class="box">
				<view v-for="(item,index) in Txt" :key="index" class="samll_box">
					<image :src="`${T0}static/generate_file/0${index+1}.svg`" mode="aspectFit"
						style="width: 316rpx;height: 64rpx;" class="Ti"></image>
					<image :src="star" mode="aspectFit" style="width: 64rpx;height: 64rpx;" class="ST"></image>
					{{item}}
				</view>
				<button v-if="!vadioShow" class="generate"  @click="ShareMoments"><text
						class="tn-icon-moments" style="font-size: 32rpx;"></text><span>推荐给好友</span></button>
			</view>
		</view>

		<!-- 回到首页悬浮按钮-->
		<nav-index-button v-if="!vadioShow"></nav-index-button>
		<!-- 回到考级悬浮按钮-->
		<nav-tem-button v-else></nav-tem-button>
	</view>
</template>

<script>
	import {
		GetText
	} from "@/api/index.js"
	import NavIndexButton from './nav-index-button.vue'
	import NavTemButton from './nav-tem-button.vue'
	import {
		mapMutations
	} from 'vuex';
	export default {
		components: {
			NavIndexButton,
			NavTemButton
		},
		data() {
			return {
				actionBG: this.$websiteUrl + 'static/generate_file/ditu.jpg',
				actionLT: this.$websiteUrl + 'static/generate_file/star.png',
				star: this.$websiteUrl + 'static/generate_file/small_star.png',
				T0: this.$websiteUrl,
				analysis: false,
				photos: '',
				videos: '',
				dialogue: '',
				vadioShow: false,
				Txt: [],
				bigboxMinHeight: 0,
				imgUrl: ''
			}

		},
		onLoad(options) {
			if (uni.getStorageSync('token') && uni.getStorageSync('userInfo')) {
				if (options.photo) {
					this.analysis = false
					const photo = JSON.parse(decodeURIComponent(options.photo))
					if (photo.dialogue) {
						this.vadioShow = false
						this.photos =  photo.photoPath
						this.init(photo, 'image')
					}
				} else {
					this.analysis = true
					const video = JSON.parse(decodeURIComponent(options.video))
					if (video.dialogue) {
						this.videos =  video.videoPath
						this.vadioShow = true
						this.init(video, 'video')
					}
				}
			} else {
				this.logout();
				uni.reLaunch({
					url: '/basicPage/login/index'
				});
			}
		},
		methods: {
			...mapMutations(['login', 'logout']),
			async init(obj, str) {
				if (str == 'image') {
					const res = await GetText({
						text: obj.dialogue,
						user_file: obj.photoPath,
					})
					this.Txt = res.data
					this.imgUrl = this.$websiteUrl + res.msg
					console.log(res);
					this.$nextTick(() => {

						const query = wx.createSelectorQuery();
						query.select('.box').boundingClientRect();
						query.exec((res) => {
							const boxHeightPx = res[0].height;
							const screenWidth = wx.getSystemInfoSync().windowWidth;
							const rpxToPxRatio = screenWidth / 750; // 假设设计稿宽度为 750rpx
							const boxHeightRpx = boxHeightPx / rpxToPxRatio;
							this.$set(this, 'bigboxMinHeight', boxHeightRpx + 1180)
						});
					})

				} else {
					const res = await GetText({
						text: obj.dialogue,
						user_file: obj.videoPath,
					})
					this.Txt = res.data
					this.imgUrl = res.msg
					console.log(res);
					this.$nextTick(() => {
						const query = wx.createSelectorQuery();
						query.select('.box').boundingClientRect();
						query.exec((res) => {
							const boxHeightPx = res[0].height;
							const screenWidth = wx.getSystemInfoSync().windowWidth;
							const rpxToPxRatio = screenWidth / 750; // 假设设计稿宽度为 750rpx
							const boxHeightRpx = boxHeightPx / rpxToPxRatio;
							this.$set(this, 'bigboxMinHeight', boxHeightRpx + 1180)
						});
					})

				}
			},

			ShareMoments() {
				wx.downloadFile({
					url: this.imgUrl,
					success: (res) => {
						wx.showShareImageMenu({
							path: res.tempFilePath
						})
					}
				})
			},
		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.Reporting {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow-y: auto;

		.bigbox {
			position: relative;
			height: 100%;

			.Forbox {
				position: absolute;
				top: 370rpx;
				width: 88%;
				left: 50%;
				transform: translate(-50%);
				border-radius: 32rpx;
				 box-sizing: border-box;
				 .BLT{
					 width: 88%;
					 height: 720rpx;
					 border-radius: 32rpx; 
					 margin-left: 6%;
					 
				 }

				.LT {
					position: absolute;
					top: -166rpx;
					left: 2%;
				}
			}

			.box {
				position: absolute;
				top: 1152rpx;
				width: 90%;
				margin-left: 5%;
				white-space: pre-wrap;
				white-space: pre-line;
				text-align: justify;
				word-break: break-word;
				letter-spacing: 1px;

				.samll_box {
					position: relative;
					padding: 18rpx 32rpx 34rpx;
					margin-top: 58rpx;
					background-color: #fff;
					border-radius: 25rpx;

					.Ti {
						position: absolute;
						left: -2rpx;
						top: -30rpx;
					}

					.ST {
						position: absolute;
						right: 0;
						top: -30rpx;
					}
				}

				.samll_box:nth-child(1) {
					margin-top: 0;
				}
			}
		}

		.generate {
			margin-top: 48rpx;
			margin-bottom: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 104rpx;
			background: #7265E3;
			border-radius: 28rpx;
			color: #fff;
			font-weight: 500;
			font-size: 32rpx;
			padding: 0 48rpx;

			span {
				margin-left: 15rpx;
			}
		}

	}
</style>